<template>
	<div class="login-container">
		<div class="login-content">
			<div class="login-box">
				<div class="welcome-section">
					<div class="brand">
						<h2 class="brand-title">NexAdmin</h2>
						<p class="brand-desc">Next Generation Admin Dashboard</p>
					</div>
					<div class="illustration">
						<NexSignIllustration type="login" />
					</div>
				</div>
				<div class="form-section">
					<div class="form-header">
						<h2>Welcome Back</h2>
						<p>Please sign in to continue</p>
					</div>
					<el-form
						ref="loginFormRef"
						:model="loginForm"
						:rules="rules"
						class="login-form"
						@keyup.enter="onLogin">
						<el-form-item prop="username">
							<el-input
								v-model="loginForm.username"
								placeholder="Username"
								:prefix-icon="User"
								@keyup.enter="onUsernameEnter" />
						</el-form-item>

						<el-form-item prop="password">
							<el-input
								ref="passwordInputRef"
								v-model="loginForm.password"
								:type="passwordVisible ? 'text' : 'password'"
								placeholder="Password"
								:prefix-icon="Lock"
								@keyup.enter="onLogin">
								<template #suffix>
									<el-icon
										class="cursor-pointer password-toggle"
										@click="onTogglePasswordVisibility">
										<component :is="passwordVisible ? 'Hide' : 'View'" />
									</el-icon>
								</template>
							</el-input>
						</el-form-item>

						<div class="form-options">
							<el-checkbox v-model="rememberMe"> Remember me </el-checkbox>
							<router-link to="/sign/forgot-password" class="forgot-link">
								Forgot password?
							</router-link>
						</div>

						<el-button
							type="primary"
							class="submit-btn"
							:loading="submitLoading"
							@click="onLogin">
							{{ submitLoading ? "Signing in..." : "Sign in" }}
						</el-button>

						<div class="register-link">
							Don't have an account?
							<router-link to="/sign/register"> Sign up </router-link>
						</div>
					</el-form>
				</div>
			</div>
		</div>

		<div class="background-decoration">
			<div class="gradient-circle circle-1" />
			<div class="gradient-circle circle-2" />
			<div class="gradient-circle circle-3" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores";
import { User, Lock } from "@element-plus/icons-vue";
import { showSuccessToast, showErrorToast } from "@/utils/toast";
import type { LoginForm } from "./types";
import { LoginStatus, LoginStatusEnum } from "@/stores/modules/user/types.ts";

const router = useRouter();
const route = useRoute();

const userStore = useUserStore();

const loginForm = reactive<LoginForm>({
	username: "",
	password: "",
});

const submitLoading = ref(false);
const loginFormRef = ref();

const rules = {
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const onLoginSuccess = () => {
	showSuccessToast("登录成功");
	const redirect = route.query?.redirect as string;
	router.push(redirect || "/");
};

const onLoginProcess = async () => {
	if (!loginFormRef.value) return;

	try {
		await loginFormRef.value.validate();

		submitLoading.value = true;

		await userStore.login(loginForm, ({ status, message, loading }: LoginStatus) => {
			if (status === LoginStatusEnum.SUCCESS) {
				onLoginSuccess();
				router.push("/");
			} else {
				showErrorToast(message || "登录失败，请检查用户名和密码");
			}

			submitLoading.value = loading;
		});
	} catch (error) {
		showErrorToast("登录失败，请检查网络连接");
	} finally {
		submitLoading.value = false;
	}
};

const onLogin = () => {
	onLoginProcess();
};

const onUsernameEnter = () => {
	if (loginForm.username && !loginForm.password) {
		passwordInputRef.value?.focus();
	} else if (loginForm.username && loginForm.password) {
		onLogin();
	}
};

const onTogglePasswordVisibility = () => {
	passwordVisible.value = !passwordVisible.value;
};

const passwordInputRef = ref();
const passwordVisible = ref(false);
const rememberMe = ref(false);
</script>

<style scoped lang="scss">
@import "./index";
</style>
